<template>
	<view class="reply">
		<view class="top">
			<comment :item="item" type="reply" :closeBtn="false"></comment>
		</view>
		<view class="list">
			<comment :item="item" v-for="item in commentList" type="reply" @removeComment="removeComment"></comment>
		</view>
		<commentInput :commentObj="commentObj" @commentEvent="commentEvent" :placeholder="`回复: ${getUserNickName(item.user_id)}`"></commentInput>
	</view>
</template>
 
<script>
	const db = uniCloud.database();
	import comment from '@/components/comment/comment.vue'
	import commentInput from '@/components/comment-input/comment-input.vue'
	import {getUserNickName} from '@/utils/tools.js';
	export default {
		components:{comment,commentInput},
		data() {
			return {
				item:{},
				commentObj:{},
				commentList:[]
			};
		},
		onLoad() {
			this.item = uni.getStorageSync('replyItem')
			this.commentObj = {
				article_id:this.item.article_id,
				comment_type:1,
				reply_user_id:this.item.user_id[0]._id,
				reply_comment_id:this.item._id
			}
			this.getCommentList()
		},
		onUnload(){
			uni.removeStorageSync("replyItem")
		},
		methods:{
			getUserNickName,
			// 评论成功回调
			commentEvent(comment){
				this.commentList = []
				this.getCommentList()
			},
			// 获取评论回复列表
			getCommentList(){
				let commentTemp = db.collection("circle-comment").where(`article_id == '${this.item.article_id}' && comment_type==1 && reply_comment_id == '${this.item._id}'`).orderBy("comment_date desc").limit(20).getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(commentTemp,userTemp).get().then(res=>{
					this.commentList = res.result.data;
					console.log('回复列表:',this.commentList)
				})
			},
			// 删除评论回调
			removeComment(id){
				let idx = this.commentList.findIndex(item=>item._id == id)
				this.commentList.splice(idx,1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reply{
		.top{
			padding: 30rpx;
			border-bottom: 15rpx solid #eee;
		}
		.list{
			padding: 30rpx;
			padding-bottom: 120rpx;
		}
	}
</style>
